<template>
	<view class="point" :data-theme="themeStyle">
		<view class="head-wrap color-base-bg"
			:style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/point_bg.png') + ')' }">
			<view class="title">当前万豆</view>
			<view class="point">{{ pointInfo.current }}</view>
			<view class="flex-box">
				<view class="flex-item">
					<view class="num">{{ pointInfo.cumulativeGain }}</view>
					<view class="font-size-tag">累计万豆</view>
				</view>
				<view class="flex-item">
					<view class="num">{{ pointInfo.cumulative }}</view>
					<view class="font-size-tag">累计消费</view>
				</view>
				<!-- <view class="flex-item">
					<view class="num">{{ pointInfo.todayPoint }}</view>
					<view class="font-size-tag">今日获得</view>
				</view> -->
			</view>
		</view>

		<view class="menu-wrap">
			<view class="menu-item" :class="{'color-base-text' : activeIndex == 0}" @click="changeTab(0)">
				<text class="iconfont iconjifen-"></text>
				<text class="font-size-base">万豆明细</text>
			</view>
			<view class="menu-item" :class="{'color-base-text' : activeIndex == 1}" @click="changeTab(1)">
				<text class="iconfont icondianpu"></text>
				<text class="font-size-base">万豆兑换</text>
			</view>
		</view>
		<block v-if="list.length && activeIndex == 0">
			<view class="detailed-wrap">
				<view class="cont">
					<view class="detailed-item" v-for="(item, index) in list" :key="index">
						<view class="info">
							<view class="event">{{ item.data_type }}</view>
							<view class="time-box">
								<text class="time color-tip">{{ $util.timeStampTurnTime(item.creatertime) }}</text>
							</view>
						</view>
						<view class="num color-base-text" v-if="item.data_number > 0">+{{ parseInt(item.data_number) }}
						</view>
						<view class="num " v-else>{{ parseInt(item.data_number) }}</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="goodsList.length && activeIndex == 1">
			<view class="point-exchange-wrap">
				<view class="list-wrap">
					<view class="goods-list double-column" v-if="goodsList.length">
						<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index">
							<view class="goods-img" @click="toDetail(item)">
								<image :src="goodsImg(item)" mode="widthFix" @error="imgError(index)"></image>
							</view>
							<view class="info-wrap">
								<view class="name-wrap">
									<view class="goods-name" @click="toDetail(item)">{{ item.name }}</view>
								</view>
								<view class="lineheight-clear">
									<view class="discount-price">
										<text class="unit color-base-text">{{ item.thousands }}</text>
										<text class="unit color-base-text font-size-tag">万豆</text>
									</view>
								</view>
								<view class="pro-info">
									<view class="font-size-activity-tag color-tip">库存{{ item.stock }}</view>
									<view class="sale font-size-activity-tag color-tip" @click="toDetail(item)">
										<!-- <button type="primary" size="mini">立即兑换</button> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="list.length == 0 || goodsList.length == 0">
			<view class="cart-empty">
				<ns-empty :fixed="false"></ns-empty>
			</view>
		</block>
		<ns-login ref="login"></ns-login>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	export default {
		data() {
			return {
				activeIndex: 0,
				page_size: 15,
				page: 1,
				pointInfo: {},
				list: [],
				goodsList: [],
				noData: false
			};
		},
		mixins: [globalConfig],
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
			if (!uni.getStorageSync('token')) {
				setTimeout(() => {
					this.$refs.login.open('/otherpages/member/thousands/thousands');
				});
			} else {
				this.getMemberPoint();
			}
		},
		methods: {
			changeTab(e) {
				this.activeIndex = e
				this.page = 1
				this.noData = false
				if (this.activeIndex == 0) {
					this.getMemberPoint()
				} else {
					this.getData()
				}

			},
			//获取万豆商品详情
			getData() {
				this.$api.sendRequest({
					url: '/pointexchange/api/goods/page',
					data: {
						page_size: this.page_size,
						page: this.page,
						type: 1,
						type_status: 3,
					},
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						//设置列表数据
						if (this.page == 1) this.goodsList = []; //如果是第一页需手动制空列表
						this.goodsList = this.goodsList.concat(newArr); //追加新数据
						if (newArr.length == 0 && this.page != 1) {
							this.noData = true
						}
					},
				});
			},
			goodsImg(data) {
				switch (data.type) {
					case 1:
						return this.$util.img(data.image.split(',')[0], {
							size: 'mid'
						});
						break;
					case 2:
						return data.image ? this.$util.img(data.image) : this.$util.img('upload/uniapp/point/coupon.png');
						break;
					case 3:
						return data.image ? this.$util.img(data.image) : this.$util.img('upload/uniapp/point/hongbao.png');
						break;
				}
			},
			//跳转至详情页面
			toDetail(item) {
				this.$util.redirectTo('/promotionpages/point/detail/detail', {
					id: item.id,
					type: 3
				});
			},
			toSign() {
				this.$util.redirectTo('/otherpages/member/signin/signin');
			},
			getMemberPoint() {
				this.$api.sendRequest({
					url: '/pointexchange/api/ordercreate/thousandsOfBeanDetail',
					data: {
						page_size: this.page_size,
						page: this.page
					},
					success: res => {
						if (res.code == 0) {
							this.pointInfo = res.data
							if (this.page == 1) {
								this.list = res.data.date
							} else {
								if (res.data.date.length == 0) {
									this.noData = true
								}
								this.list = this.list.concat(res.data.date)
							}
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},

			/**
			 * 获取充值提现配置
			 */
			getMemberrechargeConfig() {
				this.$api.sendRequest({
					url: '/memberrecharge/api/memberrecharge/config',
					success: res => {
						if (res.code >= 0 && res.data) {
							this.memberrechargeConfig = res.data;
						}
					}
				});
			}
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			this.$util.redirectTo('/pages/member/index/index', {}, 'reLaunch');
			return true;
		},
		watch: {
			storeToken: function(nVal, oVal) {
				if (nVal) {
					this.getMemberPoint();
				}
			}
		},
		computed: {
			storeToken() {
				return this.$store.state.token;
			}
		},
		onReachBottom() {
			if (!this.noData) {
				this.page++
				if (this.activeIndex == 0) {
					this.getMemberPoint();
				} else {
					this.getData();
				}

			}
		}
	};
</script>

<style lang="scss">
	@import '../public/css/point.scss';

	.detailed-wrap {
		background: #fff;
		position: relative;
		z-index: 9;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

		.head {
			display: flex;
			height: 90rpx;

			&>view {
				flex: 1;
				text-align: left;
				padding: 0 $padding;
				line-height: 90rpx;
			}
		}

		.cont {
			background: #fff;
			width: 100%;
			margin: 0 auto;

			.detailed-item {
				padding: 30rpx 0 32rpx;
				margin: 0 32rpx;
				border-bottom: 1px solid $color-line;
				position: relative;
				box-sizing: border-box;

				&:last-of-type {
					border-bottom: none;
				}

				.info {
					padding-right: 180rpx;

					.event {
						font-size: $font-size-base;
						line-height: 1.3;
						font-weight: 500;
					}

					.time-box {
						line-height: 1;
						margin-top: 24rpx;
					}

					.time {
						font-size: $font-size-activity-tag;
						color: $color-tip;
					}
				}

				.num {
					width: 160rpx;
					position: absolute;
					right: 17rpx;
					top: 50%;
					transform: translateY(-50%);
					text-align: right;
					font-size: $font-size-toolbar;
					font-weight: 500;
				}
			}
		}
	}

	.point-exchange-wrap {
		padding: 0 30rpx;
		margin-top: 30rpx;
	}

	.list-wrap {
		width: 100%;

		.list-wrap-scroll {
			width: 100%;
			flex-direction: row;
			// white-space: nowrap;
			line-height: 1;
		}

		.list-wrap-item {
			display: inline-block;
			width: 330rpx;
			overflow: hidden;
			margin-right: 30rpx;
			margin-top: 20rpx;
			position: relative;

			&.coupon-list-wrap-item {
				// height: 170rpx;
			}

			&.hongbao-list-wrap-item {
				height: 141rpx;
			}

			&:nth-child(2n+2) {
				margin-right: 0;
			}

			.img-box {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.content {
				position: relative;
				z-index: 9;

				//优惠券样式
				.coupon {
					// background-color: #FFEAEA;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					border-radius: $border-radius;
					display: flex;
					padding: $margin-updown 0;

					.coupon_right {
						position: relative;
						width: 120rpx;
						min-width: 120rpx;

						.coupon_btn {
							margin: 10rpx auto 0;
							width: 80rpx;
							height: 40rpx;
							line-height: 40rpx;
							font-size: $font-size-tag;
							text-align: center;
							border-radius: 40rpx;
							border-width: 1px;
							border-style: solid;
						}

						.coupon_num {
							margin-top: 10rpx;
							text-align: center;
						}

						// border-left: 1px dashed #FF4544;

						&::after {
							position: absolute;
							top: 0;
							margin-left: 0;
							content: "";
							width: 0;
							height: 100%;
							border-left: 1px dashed;
							opacity: 0.2;
						}

						// &::before{
						// 	position :absolute;
						// 	top:-$margin-both;
						// 	margin-left: -15rpx;
						// 	content:"";
						// 	width:30rpx;
						// 	height:15rpx;
						// 	background-color: #fff;
						// 	border-radius: 0 0 15rpx 15rpx;
						// }
					}

					.coupon_left {
						flex: 1;
						text-align: left;
						padding: 0 $padding;

						.price {
							font-size: 48rpx;
							font-weight: 500;
							margin-top: 0 !important;
							padding: 0;
							font-weight: 600;

							text {
								font-size: $font-size-tag;

							}
						}

						.coupon_condition {
							width: 170rpx;
							margin-top: $margin-updown;
							line-height: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.coupon_type {}
					}
				}

				.hongbao {
					.coupon_left {

						.price,
						.coupon_condition {
							color: #FFFFFF;
						}
					}

					.coupon_right {
						.coupon_num {
							color: #FFFFFF;
						}

						.coupon_btn {
							color: #fff;
							border-color: #fff;
						}

						&::after {
							position: absolute;
							top: 0;
							margin-left: 0;
							content: "";
							width: 0;
							height: 100%;
							border-left: 0;
							opacity: 0.2;
						}
					}
				}

				.coupon-price-wrap {
					width: 100%;
					height: 105rpx;
					display: flex;
					justify-content: space-between;

					.coupon-price {
						font-size: 48rpx;
						margin-top: 10rpx;
						margin-left: 20rpx;

						text {
							font-size: $font-size-tag;
						}
					}
				}

				.coupon-point {
					.coupon-point-num {
						width: 160rpx;
						height: 44rpx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
							position: absolute;
						}

						text {
							position: relative;
							z-index: 9;
							color: #FFFFFF;
							font-size: 24rpx;
							display: inline-block;
							width: 100%;
							line-height: 44rpx;
							text-align: center;
							vertical-align: top;
						}
					}

					.coupon-conditions {
						font-size: $font-size-activity-tag;
						color: $color-tip;
						line-height: 1;
						margin-top: $font-size-tag;
					}
				}

				.coupon-name {
					font-size: $font-size-tag;
					color: $color-title;
					margin-top: 23rpx;
					line-height: 1;
					padding: 0 22rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				// 红包
				&.hongbao-content {
					background-color: #FFFFFF;
					border-radius: 20rpx;
					padding-bottom: 30rpx;
				}

				.hongbao-img {
					height: 330rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.price {
					font-size: $font-size-base;
					color: $color-title;
					line-height: 1;
					padding-left: 26rpx;
					margin-top: 20rpx;
				}

				.point {
					font-size: $font-size-toolbar;
					padding-left: 26rpx;
					margin-top: 17rpx;
					line-height: 1;

					text {
						font-size: $font-size-tag;
					}
				}

				.stock {
					font-size: $font-size-activity-tag;
					color: $color-tip;
					line-height: 1;
					padding-left: 26rpx;
					margin-top: 20rpx;
				}
			}
		}
	}

	.cart-empty {
		margin-top: 30px !important;
	}

	// 商品列表双列样式
	.goods-list.double-column {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;

		.goods-item {
			flex: 1;
			position: relative;
			background-color: #fff;
			flex-basis: 48%;
			max-width: calc((100% - 30rpx) / 2);
			margin-right: $margin-both;
			margin-bottom: $margin-updown;
			border-radius: $border-radius;

			&:nth-child(2n) {
				margin-right: 0;
			}

			.goods-img {
				position: relative;
				overflow: hidden;
				padding-top: 100%;
				border-top-left-radius: $border-radius;
				border-top-right-radius: $border-radius;

				image {
					width: 100%;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
				}
			}

			.goods-tag {
				color: #fff;
				line-height: 1;
				padding: 8rpx 16rpx;
				position: absolute;
				border-bottom-right-radius: $border-radius;
				top: 0;
				left: 0;
				font-size: $font-size-goods-tag;
			}

			.goods-tag-img {
				position: absolute;
				border-top-left-radius: $border-radius;
				width: 80rpx;
				height: 80rpx;
				top: 0;
				left: 0;
				z-index: 5;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info-wrap {
				padding: 0 26rpx 26rpx 26rpx;
			}

			.goods-name {
				font-size: $font-size-base;
				line-height: 1.3;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				margin-top: 20rpx;
				height: 36rpx;
			}

			.discount-price {
				display: inline-block;
				font-weight: bold;
				line-height: 1;
				margin-top: 16rpx;

				.unit {
					margin-right: 6rpx;
				}
			}

			.pro-info {
				display: flex;
				margin-top: 16rpx;

				&>view {
					line-height: 1;
					flex: 1;
					display: flex;
					align-items: center;

					&:nth-child(2) {
						justify-content: flex-end;
					}

					button {
						padding: 0 16rpx;
						line-height: 2;
					}
				}
			}

			.member-price-tag {
				display: inline-block;
				width: 60rpx;
				line-height: 1;
				margin-left: 6rpx;

				image {
					width: 100%;
				}
			}
		}
	}
</style>